<template>
  <van-row gutter="20">
    <van-col span="12">
      <div class="lesson">
        <img src="/image/lesson/lesson1.png" alt="">
        <div class="info">
          <div class="title">大厂能力诊断卡</div>
          <div class="brief">行业高手替你把脉，实现能力跃迁</div>
          <div class="sale">限时优惠，限购1次</div>
          <div class="footer">
            <span class="tag">职场突围</span>
            <span class="price">699</span>
            <span class="num">2518人购买</span>
          </div>
        </div>
      </div>
    </van-col>
    <van-col span="12">
      <div class="lesson">
        <img src="/image/lesson/lesson2.jpg" alt="">
        <div class="info">
          <div class="title">大厂面试直通卡</div>
          <div class="brief">直面BAT面试官</div>
          <div class="sale">限时优惠，限购1次</div>
          <div class="footer">
            <span class="tag">专业测评</span>
            <span class="price">699</span>
            <span class="num">3586人购买</span>
          </div>
        </div>
      </div>
    </van-col>
  </van-row>
</template>

<script>
// import x from '';
export default {
  name: 'LessonBox',
  components: {

  },
  data() {
    return {

    };
  },
  computed: {

  },
  methods: {

  },
};
</script>

<style lang='less' scoped>
.van-row {
  margin: 10px 0;
}
.lesson {
  height: 210px;
  border-radius: 4px;
  font-size: 12px;
  background-color: #fff;
}
.lesson .info {
  padding: 10px;
}
.lesson .info div {
  margin: 4px 0;
}
.lesson .title {
  font-size: 14px;
}
.lesson .brief {
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lesson .sale {
  color: #999;
}

.lesson img {
  display: block;
  height: 100px;
  border-radius: 4px;
}
.lesson .footer{
  display: flex;
  text-align: center;
}
.lesson .footer .tag{
  border: 1px solid #ff7452;
  color: #ff7452;
  padding: 0 2px;
  width: 60px;

}

.lesson .footer .price{
  margin: 2px 5px;
  font-size: 16px;
  font-weight: 700;
  color: #ff7452;
}
.lesson .footer .num{
  color: #999;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

</style>
